
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">    
      <ul>   
          <li v-for="(item,index) in arr">{{index+1}}、{{item}}</li>
      </ul>
    </div>
   
    <!-- <script src=" https://cdn.bootcss.com/vue/1.0.28/vue.js"></script> -->
    <script src="./base/vue.min.js"></script>
    <script>
        //我们在body里面写的东西都是假的
        // 我们在上面的写的，我们叫做模板，实例会将模板编译一波之后再渲染到页面上
        // 带v-的，我们叫做指令（directive），指令的作用就是：操作dom！
 
        new Vue({
            el:"#app",
            data:{
                arr:["香蕉","苹果","鸭梨"]
            }
        })


    </script>
</body>
</html>